Scroll Event

Block Group: Logic
Icon: Scroll or Resize Event block icon

Listens for a scroll event, and returns scroll position and dimensions when the event occurs. Scrolling the component in Edit mode does not trigger a scroll event. If the onScrollEvent property does not exist for the component type, the listener will not function unless input is changed to a different event. onScrollEvent exists for groups and the Stage. It does not exist for page includes and text components.


Input/Output Properties

These properties can take input and give output.

input specifies the event on which the scroll listener starts reporting data. By default, input is an instance of onScrollEvent, so the listener returns data whenever the parent is scrolled. Note that the onScrollEvent property does not exist for all component types.

active determines whether the block is currently listening.

fastResponse determines whether the fastResponse feature is enabled. Use this feature when you troubleshoot performance speed issues relating to this block.


Output Properties

These properties can give output. They cannot take input.

event returns the type of event that triggered this block.

scrollLeft returns the difference in pixels between the left edge of the content and the left edge of the portion currently scrolled to.

scrollTop returns the difference in pixels between the top edge of the content and the top edge of the portion currently scrolled to.

scrollWidth returns the width of the scrollable area.

scrollHeight returns the height of the scrollable area.


Model

When the scrollTop property is greater than 100, a pop-up shape is displayed.

Scroll Event dataflow model


Use Case

To cause a pop-up to appear when the user scrolls below a certain position:

  1. Create a group.
  2. Add content to the group that is vertically larger than its bounds, such as a text component with several lines.
  3. Enable vertical scrolling for the group.
  4. Create a second element next to the group, such as a shape. This is your pop-up.
  5. Open dataflow for the group, and add a Scroll Event block and an If block.
  6. Configure the If block as follows:
  7. Select the pop-up element.
  8. Bind the output property of the group’s If block to the Display property of the shape. To find the Display property for the pop-up, expand the bottom section of the top group of properties.
  9. Save the file, and refresh your browser.
Verify that, in Preview mode, the pop-up appears only when the scrollTop value is greater than 100.